/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

//时间控件，官网：https://github.com/weifeiyue/vue-datepicker-local
import VueDatepickerLocal from 'vue-datepicker-local'

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        searchParams:{
            user_source:0,
            start_time:page_params.data_start_date,
        },
        start_time:'',
        chart:null,
        box:null,
    },
    watch:{
        start_time:function (val) {
            if (val){
                var d = new Date(val);
                let format = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                this.searchParams.start_time = format;
            } else{
                this.searchParams.start_time = '';
            }
        },
    },
    mounted:function(){
        this.query();
    },
    methods: {
        query: function () {
            utils.ajaxGet(page_params.url_list, this.searchParams, (response, postdata) => {
                if (response.status == 200) {
                    let chartApiData = response.data;
                    let chart1Data = {
                        labels: chartApiData.dateList,
                        datasets: [
                            {
                                label: '图文页（点击群发图文卡片进入的页面）的阅读人数',
                                backgroundColor: '#a3e1d4',
                                borderColor: "rgba(26,179,148,0.7)",
                                pointBackgroundColor: "rgba(26,179,148,1)",
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.int_page_read_count
                            },
                            {
                                label: '原文页（点击图文页“阅读原文”进入的页面）的阅读人数',
                                backgroundColor: '#b5b8cf',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.ori_page_read_count
                            },
                            {
                                label: '分享的人数',
                                backgroundColor: 'lightgreen',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.share_count
                            },
                            {
                                label: '收藏的人数',
                                backgroundColor: 'lightblue',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.add_to_fav_count
                            }
                        ]
                    };
                    let chartOptions = {
                        responsive: true
                    };
                    if (!_.isEmpty(this.chart1)){
                        this.chart1.destroy();
                    }
                    this.chart1 = new Chart($("#myChart1"), {type: 'bar', data: chart1Data, options:chartOptions});
                    let chart2Data = {
                        labels: chartApiData.dateList,
                        datasets: [
                            {
                                label: '图文页的阅读次数',
                                backgroundColor: '#a3e1d4',
                                borderColor: "rgba(26,179,148,0.7)",
                                pointBackgroundColor: "rgba(26,179,148,1)",
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.int_page_read_count
                            },
                            {
                                label: '原文页的阅读次数',
                                backgroundColor: '#b5b8cf',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.ori_page_read_count
                            },
                            {
                                label: '分享的次数',
                                backgroundColor: 'lightgreen',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.share_count
                            },
                            {
                                label: '收藏的次数',
                                backgroundColor: 'lightblue',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.add_to_fav_count
                            }
                        ]
                    };
                    if (!_.isEmpty(this.chart2)){
                        this.chart2.destroy();
                    }
                    this.chart2 = new Chart($("#myChart2"), {type: 'bar', data: chart2Data, options:chartOptions});
                }
            });
        },
    },
    components: {
        VueDatepickerLocal
    },
});